<!DOCTYPE html>
<html lang="en">
<head>
	<!-- The jQuery library is a prerequisite for all jqSuite products -->
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<!-- We support more than 40 localizations -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
	<!-- This is the Javascript file of jqGrid -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
	<!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css" />
	<script>
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script src="json/twoLevelHierarchy.js"></script>
	<script src="json/twoLevelHierarchySub.js"></script>
	<meta charset="utf-8" />
	<title>jqGrid Loading Data - Two Level Hierarchy</title>
</head>
<body>
<div style="margin-left:20px">
	<table id="jqGrid"></table>
	<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
	$(document).ready(function () {
		$("#jqGrid").jqGrid({
			// url: 'data.json',
			mtype: "GET",
			datatype: "local",
			data: dataArray,
			colModel: [
				{ label: 'ID', name: 'CustomerID', key: true, width: 75 },
				{ label: 'Company Name', name: 'CompanyName', width: 150 },
				{ label: 'Contact Name', name: 'ContactName', width: 150 },
				{ label: 'Phone', name: 'Phone', width: 150 },
				{ label: 'City', name: 'City', width: 150 }
			],
			loadonce : true,
			width: 780,
			height: 250,
			rowNum: 10,
			subGrid: true, // set the subGrid property to true to show expand buttons for each row
			subGridRowExpanded: showChildGrid, // javascript function that will take care of showing the child grid
			pager: "#jqGridPager"
		});
	});
	// the event handler on expanding parent row receives two parameters
	// the ID of the grid tow  and the primary key of the row
	function showChildGrid(parentRowID, parentRowKey) {
		var childGridID = parentRowID + "_table";
		var childGridPagerID = parentRowID + "_pager";
		// send the parent row primary key to the server so that we know which grid to show
		var childGridURL = parentRowKey+".json";
		//childGridURL = childGridURL + "&parentRowID=" + encodeURIComponent(parentRowKey)
		// add a table and pager HTML elements to the parent grid row - we will render the child grid here
		$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
		$("#" + childGridID).jqGrid({
			url: childGridURL,
			mtype: "GET",
			datatype: "local",
			data: dataArraySub,
			page: 1,
			colModel: [
				{ label: 'Order ID', name: 'OrderID', key: true, width: 75 },
				{ label: 'Required Date', name: 'RequiredDate', width: 100 },
				{ label: 'Ship Name', name: 'ShipName', width: 100 },
				{ label: 'Ship City', name: 'ShipCity', width: 100 },
				{ label: 'Freight', name: 'Freight', width: 75 }
			],
			loadonce: true,
			width: 500,
			height: '100%',
			pager: "#" + childGridPagerID
		});
	}
</script>
</body>
</html>